<template>
	<view class="body">
		
		<view class="line" ></view>
		
		<view class="content" >
			<view>付款金额</view>
			<view class="input-view" >
				<span class="money" >¥</span>
				<input v-model="amount" placeholder="输入自定义金额"  />
			</view>
		</view>
		
		<view>
			<button class="payBtn" >付款</button>
		</view>
		
	</view>
</template>

<script>
	export default{
		
		data(){
			return{
				amount: ""
			}
		},
		methods:{
			
		}
	}
	
</script>

<style lang="scss" scoped >
	
	.body{
		
		width: 100%;
		height: 100%;
		
	}
	
	.line{
		height: 20rpx;
		background-color: rgb(250,250,250);
	}
	
	.content{
		margin: 30rpx 20rpx;
	}
	
	.input-view{
		display: flex;
		align-items: center;
		margin: 20rpx;
		padding: 20rpx 0;
		
		border-bottom: 1rpx solid $uni-color-error;
		
		.money{
			font-size: $uni-font-size-lg+10rpx;
			font-weight: bold;
		}
		
		input{
			margin-left: 20rpx;
			
			font-size: $uni-font-size-lg;
		}
	}
	
	.payBtn{
		
		margin: 80rpx 30rpx;
		padding: 10rpx 0;
		
		
		font-size: $uni-font-size-base;
		background-color: $uni-color-error;
		color: #FFFFFF;
		
		
	}
	
	button::after{
		border: none;
	}
	
</style>
